﻿<UserControl x:Class="KSADataVisualizer.TouchDeviceDiagram"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Canvas x:Name="MainCanvas" Background="Transparent">
        <!-- An Ellipse is created using TouchDevice.GetEllipse(),and added to this Canvas. -->

        <!-- This arrow shows the touch device orientation. -->
        <Canvas x:Name="OrientationArrow">
            <Canvas.RenderTransform>
                <TransformGroup>
                    <TranslateTransform X="20" Y="-5" />
                    <RotateTransform x:Name="ArrowRotateTransform" Angle="0" />
                    <TranslateTransform x:Name="ArrowTranslateTransform" Y="-5" />
                </TransformGroup>
            </Canvas.RenderTransform>
            <Path StrokeThickness="3.000000" 
            Stroke="Yellow" 
            StrokeMiterLimit="1.000000" Data="F1 M 0.000000,4.754883 L 24.206055,4.754883" />
            <Path Fill="Yellow" 
            Data="F1 M 35.241211,4.754883 C 32.401367,5.808594 23.877930,7.606445 21.694336,9.509766 L 23.414063,4.754883 L 21.694336,0.000000 C 23.877930,1.903320 32.401367,3.701172 35.241211,4.754883 Z" />
        </Canvas>

        <!-- This line is updated to connect the center of ellipse and the description textbox. -->
        <Line x:Name="ConnectingLine" 
          Stroke="Yellow" 
          Opacity="1" 
          StrokeThickness="1" />

        <!-- This TextBlock is used to display the touch device properties and values.  -->
        <TextBlock x:Name="Description" 
               Height="320" 
               Width="900" 
               FontSize="20" 
               Foreground="AliceBlue" 
               FontFamily="Segoe360"
               FontWeight="Normal"
               Opacity="1.0" Padding="11.0" />

    </Canvas>
</UserControl>
